<template>
	<view
		class="  rounded mr-3 "
		hover-class=""
		@click="clickEvent"
		:class="disabled ? 'bg-light border' : 'main-bg-color'"
	>
		<view class="flex align-center px-2 py-1 justify-center">
			<text
				style="white-space: nowrap;"
				class="font  flex-1 "
				:class="disabled ? 'text-light-muted' : 'text-white'"
			>
				{{ name }}
			</text>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		name: {
			type: String,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	methods: {
		clickEvent() {
			if (!this.disabled) {
				this.$emit('click');
			}
		}
	}
};
</script>

<style></style>
